<template>
  <div class="detail-content">
    <div class="detail-container">
      <div class="left-container">
        <div style="display: flex">
          <div class="status-box">
            <div class="label">{{ name }}状态 :</div>
            <div v-bind:class="['value', info.deviceStatus != 1 ? 'organe' : '']">
              {{
                info.deviceStatus == 0
                ? '离线'
                : info.deviceStatus == 1
                  ? '运行正常'
                  : '检修中'
              }}
            </div>
            <img v-if="info.deviceStatus == 1" style="margin-left: 7rem" class="status" src="@/assets/statuszc.png" />
            <img v-else class="status" style="margin-left: 7rem" src="@/assets/statusyc.png" />
          </div>
          <div v-if="type == 1 || type == 2" @click="boxTimeCheck" style="
              cursor: pointer;
              display: flex;
              margin-top: 4rem;
              margin-right: 1rem;
              width: 15rem;
              height: 5rem;
            ">
            <!-- <el-button>时间同步</el-button> -->
            <div style="
                font-size: 1.3rem;
                color: white;
                font-weight: bold;
                line-height: 2.7rem;
                margin-right: 1rem;
              ">
              时间同步
            </div>
            <img style="width: 3rem; height: 3rem" src="@/assets/home/open.png" alt="" />
          </div>
        </div>

        <div class="jczt-box">
          <div class="title">
            <div class="circle"></div>
            监测状态
          </div>
          <div class="jklist">
            <div class="item" v-for="(item, index) in info.boxNumericals" :key="index">
              <div class="label">{{ item.deviceName }}</div>
              <div class="value" style="
                  display: flex;
                  font-size: 2.5rem;
                  width: 30rem;
                  line-height: 3.6rem;
                  justify-content: center;
                ">
                <div style="margin-left: 1.5rem">
                  {{ item.realDataConvert }}
                </div>
                <div style="
                    font-size: 2.3rem;
                    line-height: 3.6rem;
                    padding-left: 1rem;
                  ">
                  {{ item.unit }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="zt-box">
        <div class="kgzt-box">
          <div class="title">
            <div class="circle"></div>
            <div style="width: 28rem">开关状态</div>
            <div>
              <el-select v-model="changebox" @change="getTo" placeholder="请选择控制箱" clearable>
                <el-option v-for="item in boxArrary" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </div>
            <div style="
                display: flex;
                margin-left: 5rem;
                cursor: pointer !important;
              " @click="$router.back()">
              返回
            </div>
          </div>
          <div class="kgzt-content">
            <div class="list">
              <div class="item" style="
                  width: 18rem;
                  height: 10rem;
                  margin-right: 8rem;
                  margin-bottom: 3rem;
                " v-for="(item, index) in info.boxSwitches" :key="index">
                <div class="kgztline">
                  <div>
                    <!-- 开关设置 -->
                    <el-switch @change="openOrCloseSwitch(item, (type = 0))" v-model="item.deviceStatus" :active-value="1"
                      :inactive-value="0" active-color="#13ce66" inactive-color="#c6c6c6">
                    </el-switch>
                    <!-- <img v-if="item.deviceStatus == 1" class="kai" src="@/assets/box/kai.png" />
                    <img v-else class="guan" src="@/assets/box/guan.png" /> -->
                  </div>
                  <!-- {{ item.deviceStatus }} -->
                  <img v-if="item.deviceStatus == 0" style="margin-left: 2rem" class="status"
                    src="@/assets/box/statusyc.png" />
                  <img style="margin-left: 2rem" v-else class="status" src="@/assets/box/statuszc.png" />
                </div>
                <!-- 这里还需要更改 -->
                <div class="word" style="font-size: 1.6rem; font-weight: bold">
                  {{ item.fishpondName }} {{ item.deviceName }}
                </div>
              </div>
            </div>
            <div class="js-box" v-if="info.type == 0">
              <div class="title">
                <div class="circle"></div>
                进水模式
              </div>
              <div class="moshi">
                <div v-bind:class="[
                    'itemR',
                    info.inWaterModel == 0 ? 'xz-item' : '',
                  ]">
                  手动抽水模式
                </div>
                <div v-bind:class="[
                    'itemL',
                    info.inWaterModel == 1 ? 'xz-item' : '',
                  ]">
                  自动抽水模式
                </div>
              </div>
            </div>
            <div class="ws-box" v-if="info.type == 2">
              <div class="title">
                <div class="circle"></div>
                尾水状态
              </div>
              <div class="wsmoshi">
                <div class="zlist">
                  <div v-bind:class="[
                      'itemR',
                      info.tailWaterModel == 0 ? 'xz-item' : '',
                    ]">
                    排污模式
                  </div>
                  <div v-bind:class="[
                      'itemC',
                      info.tailWaterModel == 1 ? 'xz-item' : '',
                    ]">
                    换水模式
                  </div>
                  <div v-bind:class="[
                      'itemC',
                      info.tailWaterModel == 2 ? 'xz-item' : '',
                    ]">
                    上清水模式
                  </div>
                  <div v-bind:class="[
                      'itemL',
                      info.tailWaterModel == 3 ? 'xz-item' : '',
                    ]">
                    故障
                  </div>
                </div>
              </div>
            </div>
            <div class="list" v-if="info.type == 0">
              <div class="item">
                <div class="kgztline">
                  <div>
                    <!-- <img v-if="info.inWaterModel == 1" class="kai" src="@/assets/kai.png" />
                    <img v-else class="guan" src="@/assets/guan.png" /> -->
                    <el-switch @change="openOrCloseSwitch1(info, (type = '1'))" :active-value="1" :inactive-value="0"
                      v-model="info.inWaterModel" active-color="#13ce66" inactive-color="#c6c6c6">
                    </el-switch>
                  </div>
                  <!-- <img v-if="info.inWaterModel == 1" class="status" src="@/assets/box/statuszc.png" />
                  <img v-else class="status" src="@/assets/box/statusyc.png" /> -->
                </div>
                <div class="word" style="font-size: 1.3rem; font-weight: bold; margin-top: 2rem">
                  {{ info.inWaterModel == 0 ? '自流模式' : '抽水模式' }}
                </div>
              </div>
            </div>
            <div class="list" v-if="info.type == '2'">
              <div class="item">
                <div class="kgztline">
                  <div v-bind:class="[
                      'line',
                      info.tailWaterModel != 1 ? 'lineguan' : '',
                    ]">
                    {{ info.tailWaterModel == 1 ? '开' : '关' }}
                    <img v-if="info.tailWaterModel == 1" class="kai" src="@/assets/kai.png" />
                    <img v-else class="guan" src="@/assets/guan.png" />
                  </div>
                  <img v-if="info.tailWaterModel == 1" class="status" src="@/assets/box/statuszc.png" />
                  <img v-else class="status" src="@/assets/box/statusyc.png" />
                </div>
                <div class="word">
                  {{
                    info.tailWaterModel == 0
                    ? '排污模式'
                    : info.tailWaterModel == 1
                      ? '换水模式'
                      : info.tailWaterModel == 2
                        ? '上清水模式'
                        : '故障'
                  }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getObjBoxInfo,
  openOrCloseSwitch,
  boxTimeCheck,
  getObjBoxs,
} from '@/api/system'
import { async } from 'q'
import router from '../../../router'
export default {
  components: {},
  // 表格数据
  data() {
    return {
      status1: '',
      value: true,
      status: '',
      attributeCode: '',
      boxId: '',
      info: {},
      cs: 1,
      type: '',
      name: '',
      deviceCode: '',
      timer: '',
      boxArrary: [],
      changebox: '',
    }
  },

  //销毁钩子
  beforeDestroy() {
    // // 清除定时器
    if (this.timer) {
      console.log(1)
      clearInterval(this.timer)
      // const element = document.getElementById('content')
      // screenfull.exit(element)
    }
  },
  // 初始化加载
  mounted() {
    console.log(this.$route.query)
    this.boxId = this.$route.query.id
    this.type = this.$route.query.type
    this.name = this.$route.query.name

    this.getObjBoxInfo()
    this.setInterval()
    this.getObjBoxs()
    this.getObjBoxInfo()
  },
  // 自定义方法
  methods: {
    // 页面选择跳转
    getTo(value) {
      console.log(value)
      this.boxId = value
      getObjBoxInfo({ id: value }).then((res) => {
        if (res.code == 200) {
          this.info = res.data
          this.type = this.info.type
          this.name = this.info.name
          console.log(this.info)
        }
      })
      // this.$router.push({
      //   path: `/device/sysBoxDetail?id=` + row.id + '&code=' + row.code + '&name=' + row.name + '&type=' + row.type + '&baseId=' + row.baseId,
      // });
    },
    getObjBoxs() {
      getObjBoxs({ id: this.$route.query.baseId }).then((res) => {
        if (res.code == 200) {
          this.boxArrary = res.data
        }
      })
    },
    boxTimeCheck() {
      boxTimeCheck({ id: this.boxId }).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: res.msg,
          })
        }
      })
    },
    setInterval() {
      let that = this
      this.timer = window.setInterval(() => {
        setTimeout(() => {
          that.getObjBoxInfo() //我们的获取接口数据函数
        }, 0)
      }, 10000)
    },
    // 改变数组的方法
    getObjBoxInfo() {
      getObjBoxInfo({ id: this.boxId }).then((res) => {
        if (res.code == 200) {
          this.info = res.data
          console.log(this.info.boxSwitches[0].deviceStatus)
        }
      })
    },
    openOrCloseSwitch1(item, type) {
      clearInterval(this.timer)

      this.attributeCode = item.attributeCode
      this.deviceCode = item.deviceCode
      this.status = item.inWaterModel
      // if (item.inWaterModel == 1) {
      //   this.status = 1
      // } else {
      //   this.status = 0
      // }
      openOrCloseSwitch({
        attributeCode: this.attributeCode,
        deviceCode: this.deviceCode,
        status: this.status,
        type: type,
      }).then((res) => {
        if (res.code == 200) {
          setTimeout(() => {
            this.setInterval()
          }, 3000)
          // this.getObjBoxInfo()
          // item.deviceStatus = 1
          // console.log(item.deviceStatus);
        } else {
          this.setInterval()
        }
        // if (res.code !== 200) {
        //   item.dedeviceStatus = 2
        // }
      })
    },
    // 控制开关状态
    openOrCloseSwitch(item, type) {
      clearInterval(this.timer)

      this.attributeCode = item.attributeCode
      this.deviceCode = item.deviceCode
      if (item.deviceStatus == 1) {
        this.status = 1
      } else {
        this.status = 0
      }
      openOrCloseSwitch({
        attributeCode: this.attributeCode,
        deviceCode: this.deviceCode,
        status: this.status,
        type: type,
      }).then((res) => {
        if (res.code == 200) {
          setTimeout(() => {
            this.setInterval()
          }, 3000)
          // this.getObjBoxInfo()
          // item.deviceStatus = 1
          // console.log(item.deviceStatus);
        } else {
          this.setInterval()
        }
        // if (res.code !== 200) {
        //   item.dedeviceStatus = 2
        // }
      })
    },
  },
}
</script>
<style lang="less" scoped>
/*滚动条整体样式*/
::-webkit-scrollbar {
  display: none;
  // width: 4px;
  // height: 10px;
}

// /*滚动条里面小方块*/
// ::-webkit-scrollbar-thumb {
//   border-radius: 10px;
//   background: #48a0f8;
// }

// /*滚动条里面轨道*/
// ::-webkit-scrollbar-track {
//   border-radius: 10px;
//   background: #ededed;
// }
/deep/.el-switch__core {
  width: 6rem !important;
  height: 2.7rem;
  border-radius: 40px;

  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1) inset;
}

/deep/ .el-switch__core:after {
  width: 3rem !important;
  height: 3rem !important;
  // left: 5rem !important;
  // margin-top: 0.2rem;
  // margin-top: -1;
  // top: -1;
  margin-top: -0.35rem;
  margin-left: -0.5rem;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

/deep/.el-switch.is-checked .el-switch__core::after {
  margin-left: -2rem;
  // margin-top: 0.2rem;
}

.detail-content {
  // position: absolute;
  // top: 0;
  // bottom: 0;
  min-height: calc(100vh - 90px);
  // height: 100%;
  width: 100%;
  background: #2a2d3c;

  // flex-direction: column;
  .detail-container {
    margin-top: 39px;
    display: flex;

    .left-container {
      width: 47.72%;
      border-right: 5px solid #373b44;
      height: 100%;
    }

    .status-box {
      width: 100%;
      height: 12rem;
      border-bottom: 5px solid #373b44;
      border-radius: 6px;
      padding-left: 50px;
      padding-top: 25px;
      position: relative;

      .label {
        color: white;
        font-size: 1.91rem;
        margin-top: 11px;
      }

      .value {
        color: #0dcc24;
        font-size: 2.21rem;
        margin-top: 1.11rem;
      }

      .organe {
        color: #efc000;
      }

      .status {
        width: 5.57rem;
        height: 5.57rem;
        position: absolute;
        top: 3.17rem;
        left: 15.5rem;
      }
    }

    .jczt-box {
      width: 90%;
      height: 100%;
      padding-left: 50px;
      padding-top: 25px;
    }

    .title {
      display: flex;
      align-items: center;
      font-size: 1.43rem;
      font-weight: bold;
      color: #ffffff;
      margin-bottom: 12px;

      .circle {
        width: 5px;
        height: 5px;
        background: #2ce11a;
        border-radius: 50%;
        margin-right: 5px;
      }
    }

    .jklist {
      width: 100%;
      // max-height: 90%;
      height: 80%;
      // height: 80%;
      margin-top: 1.5rem;
      padding: 20px 28px;
      background: #f2f2f2;
      border-radius: 7px;
      display: flex;
      flex-direction: column;
      // justify-content: space-around;
      overflow-y: auto;

      .item {
        width: 90%;
        height: 5rem;
        display: flex;
        align-items: center;
        display: flex;

        justify-content: space-between;
        margin-bottom: 3rem;
        margin-top: 2rem;

        .label {
          width: 75%;
          margin-left: 1rem;
          // text-align: center;
          color: #333333;
          font-size: 2rem;
          font-weight: bold;

          font-family: MicrosoftYaHei;
        }

        /deep/ .value {
          width: 185px;
          height: 4.3rem;
          line-height: 4rem;
          background-color: #0100ff;
          color: #ffffff;
          border: 3px solid hsla(0, 0%, 100%, 0.5);
          // border: 1px solid rgba(124, 124, 124, 0.26);
          // background-image: url(../../../assets/box/num.png);
          background-size: 185px 45px;
          background-repeat: no-repeat;
          text-align: center;
          // color: #333333;
          font-size: 21px;
          // line-height: 27px;
        }
      }
    }

    .zt-box {
      width: 50%;
      margin-top: 39px;
      display: flex;
      align-items: flex-start;
    }

    .kgzt-box {
      margin-left: 6rem;

      .title {
        display: flex;
        align-items: center;
        font-size: 1.43rem;
        font-weight: bold;
        color: #ffffff;

        .circle {
          width: 5px;
          height: 5px;
          background: #2ce11a;
          border-radius: 50%;
          margin-right: 5px;
        }
      }

      .kgzt-content {
        width: 100%;
        padding: 20px 0px;

        .list {
          display: flex;
          flex-wrap: wrap;

          .item {
            width: 13.71rem;
            height: 7.86rem;
            background: #f2f2f2;
            border-radius: 6px;
            border: 1px solid rgba(124, 124, 124, 0.12);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-right: 5rem;
            margin-bottom: 1.23rem;

            .kgztline {
              display: flex;
              align-items: center;

              .line {
                position: relative;
                width: 6.5rem;
                height: 2.71rem;
                background: #2de21b;
                border-radius: 1.36rem;
                line-height: 2.71rem;
                margin-right: 1.83rem;
                padding: 0 10px;
                color: #ffffff;
                text-align: right;
                font-size: 1.29rem;

                .kai {
                  position: absolute;
                  width: 3.07rem;
                  height: 3.07rem;
                  top: -3px;
                  left: -11px;
                }

                .guan {
                  position: absolute;
                  width: 3.07rem;
                  height: 3.07rem;
                  top: -3px;
                  right: -11px;
                }
              }

              .lineguan {
                text-align: left;
                background: #eeeeee;
                box-shadow: inset 0rem 0.07rem 0.21rem 0rem rgba(137, 137, 137, 0.5);
                font-size: 1.29rem;
                color: #b0b0b0;
              }

              .status {
                margin-top: 0.4rem;
                width: 3rem;
                height: 3rem;
                margin-left: 2rem;
              }

              .statusyc {
                width: 20px;
                height: 20px;
                border-radius: 50%;
                margin-left: 5px;
                background: linear-gradient(360deg, #b0b0b0 0%, #ffffff 100%);
              }
            }

            .word {
              width: 100%;
              text-align: center;
              margin-top: 1.09rem;
              color: #333333;
              font-size: 1.29rem;
            }
          }
        }

        .moshi {
          width: 40rem;
          display: flex;
          align-items: center;
          color: #333333;
          font-size: 1.29rem;
          margin: 1rem 0 1.5rem 0;
        }

        .wsmoshi {
          display: flex;
          align-items: flex-start;
          color: #333333;
          font-size: 1.29rem;
          margin: 1rem 0 1.5rem 0;

          .title {
            width: 140px;
          }

          .zlist {
            display: flex;
            flex-wrap: wrap;
          }
        }
      }
    }

    .itemR {
      width: 10rem;
      height: 2.79rem;
      text-align: center;
      line-height: 2.79rem;
      background-color: #e8e8ea;
      border: 0.07rem solid rgba(124, 124, 124, 0.12);
      border-radius: 0.29rem 0rem 0rem 0.29rem;
    }

    .itemL {
      width: 10rem;
      height: 2.79rem;
      text-align: center;
      line-height: 2.79rem;
      background-color: #e8e8ea;
      border: 0.07rem solid rgba(124, 124, 124, 0.12);
      border-radius: 0rem 0.29rem 0.29rem 0rem;
    }

    .itemC {
      width: 7.07rem;
      height: 2.79rem;
      text-align: center;
      line-height: 2.79rem;
      background-color: #e8e8ea;
      border: 0.07rem solid rgba(124, 124, 124, 0.12);
    }

    .xz-item {
      color: #ffffff;
      background-color: #35bb28;
    }
  }
}
</style>
